<template>
  <div class="app-container">

    <div class="search-container">
      <div class="search-title">
        查询条件
      </div>
      <div class="search-form">
        <div class="form-row">
          <div class="form-column">
            <span class="column-title">姓名</span>
            <el-input v-model="queryParams.personnelName" placeholder="请输入" class="input-w150" clearable
              @keyup.enter.native="handleQuery" />
          </div>
          <div class="form-column">
            <span class="column-title">技能名称</span>
            <el-input v-model="queryParams.skillName" placeholder="请输入" class="input-w150" clearable
              @keyup.enter.native="handleQuery" />
          </div>
          <div class="form-column">
            <span class="column-title">单位</span>
            <treeselect class="input-w150" v-model="queryParams.certificationMechanism" :options="deptOptions"
              :show-count="true" placeholder="请选择" />
          </div>
          <div class="form-column">
            <span class="column-title">技能等级</span>
            <el-select v-model="queryParams.skillLevel" placeholder="请选择" class="input-w150" clearable filterable>
              <el-option v-for="dict in dict.type.sys_skill_level" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </div>
          <div class="form-column">
            <span class="column-title">创建时间</span>
            <el-date-picker v-model="createTime" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="daterange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="input-w383" clearable>
            </el-date-picker>
          </div>
          <div class="form-column">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </div>
        </div>
      </div>
    </div>


    <div class="body-container">
      <div class="operation-bar">
        <div class="bar-title">
          职业鉴定列表
        </div>
        <div class="bar-btn__wrapper">
          <div class="bar-btn" @click="handleAdd"><i class="el-icon-plus"></i>新增</div>
        </div>
      </div>

      <el-table v-loading="loading" stripe :data="dataList">
        <el-table-column type="index" label="#" align="center" min-width="100"></el-table-column>
        <el-table-column label="姓名" prop="personnelName" align="center" min-width="200">
          <template slot-scope="scope">
            <el-link @click="handleToDetail(scope.row)" :underline="false" type="primary">{{ scope.row.personnelName
              }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="技能名称" prop="skillName" align="center" min-width="200" />
        <el-table-column label="单位" prop="certificationMechanism" align="center" min-width="200">
          <div slot-scope="scope">
            {{ getDeptName(scope.row.personnelId) }}
          </div>
        </el-table-column>
        <el-table-column label="技能等级" prop="skillLevel" align="center">
          <template slot-scope="scope">
            {{ selectDictLabel(dict.type.sys_skill_level, scope.row.skillLevel,) }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createStamp" align="center" min-width="200">
          <template slot-scope="scope">
            {{ parseTime(scope.row.createStamp) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="160" class-name="small-padding fixed-width" fixed="right">
          <div class="table-option" slot-scope="scope" v-if="scope.row.roleId !== 1">

            <span @click="handleEdit(scope.row, 'look')">查看</span>
            <span @click="handleEdit(scope.row, 'edit')">编辑</span>
            <span @click="handleAddData(scope.row)">添加到人才库</span>
            <span class="danger" @click="handleDelete(scope.row)">删除</span>
          </div>
        </el-table-column>
      </el-table>

      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

    <UserDetail :id="personnelId" :visible.sync="userDialog"></UserDetail>
    <Edit :title="editTitle" :id="String(actionId)" :dialogType="actionType" :visible.sync="editDialog"
      @close="getList">
    </Edit>
  </div>
</template>
  
<script>
import { deptTree, } from "@/api/org";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { findList, delSkillManagement } from "@/api/skill";
import { parseTime } from "@/utils/ruoyi";
import Edit from './components/edit.vue'
import UserDetail from '@/components/userDetail.vue'
import { getDeptName, getDeptNameStr } from "@/utils/ruoyi";
import { addPersonalTalent } from "@/api/talent";
export default {
  name: "file",
  dicts: ['sys_position_type', 'sys_skill_level'],
  components: {
    Edit,
    Treeselect,
    UserDetail
  },
  data () {
    return {
      userDialog: false,
      personnelId: '',
      deptOptions: [],
      actionType: 'add',
      actionId: '',
      editTitle: '',
      editDialog: false,
      dataList: [],
      loading: true,
      total: 0,
      createTime: [],
      queryParams: {
        keyword: undefined,
        pageNum: 1,
        pageSize: 10,
      },
    };

  },
  computed: {
    deptList () {
      return this.$store.state.user.deptList
    },
    userList () {
      return this.$store.state.user.userList
    }
  },
  created () {
    this.getList();
    this.getDeptTree();
  },
  methods: {
    // 新增到人才库
    async handleAddData (row) {
      let sourceObj = {
        "personnelId": row.personnelId,
      }
      let res = await addPersonalTalent(sourceObj)
      if (res.code === 200) {
        this.$modal.msgSuccess("添加成功");
      } else {
        this.$modal.msgWarning(res.msg);
      }
    },
    getDeptName (id) {
      return getDeptNameStr(this.userList, id)
    },
    // 打开用户详情
    handleToDetail (row) {
      this.userDialog = true;
      this.personnelId = String(row.personnelId)
    },
    getDeptTree () {
      deptTree().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 新增技能
    handleAdd () {
      this.actionId = '';
      this.actionType = 'add';
      this.editTitle = '新增职业技能鉴定'
      this.editDialog = true;
    },
    // 操作详情
    handleEdit (row, type) {
      if (type == 'look') {
        this.editTitle = '查看职业技能鉴定';
      } else {
        this.editTitle = '编辑职业技能鉴定'
      }
      this.actionId = row.id;
      this.actionType = type;
      this.editDialog = true;
    },
    // 查询
    async getList () {
      this.loading = true;
      let params = {
        ...this.queryParams
      }
      if (this.createTime && this.createTime.length > 0) {
        params.startTime = this.createTime[0]
        params.endTime = this.createTime[1]
      }
      const res = await findList(params)
      this.loading = false;
      if (res.code === 200) {
        this.dataList = res.rows || [];
        this.total = res.total || 0;
      } else {
        this.loading = false;
        this.dataList = [];
        this.total = 0;
      }
    },

    // 查询
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    resetQuery () {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      }
      this.createTime = [];
      this.handleQuery();
    },
    // 删除技能
    handleDelete (row) {
      let that = this;
      this.$modal.confirm('是否确认删除?').then(async function (res) {
        if (res == 'confirm') {
          let response = await delSkillManagement(row.id)
          if (response.code == 200) {
            that.$message.success('删除成功')
          } else {
            that.$message.error(response.msg)
          }
        }
      }).then(() => {
        this.getList();
      }).catch(() => { });
    }
  }
};
</script>